<template>
  <div class="search_box" :style="{ padding: isPadding0 ? '0' : '' }">
    <ga-table-tool
      placeholder="请输入集群名称"
      @handle-search="onSearch"
      @handle-refresh="fetchClusterData"
    />
  </div>
  <div class="content_info" :style="{ height, padding: isPadding0 ? '0' : '' }">
    <ga-table
      row-key="id"
      :loading="loading"
      :pagination="false"
      :columns="columns"
      :data="tableData"
      :bordered="false"
      :hoverable="false"
    >
      <template #enabled="{ record }">
        <ga-switch
          :checked-value="1"
          :unchecked-value="0"
          size="mini"
          v-model="record.enabled"
          @change="handleEnabledChange(record, 'enabled')"
        />
      </template>
      <template #isShared="{ record }">
        <ga-switch
          size="mini"
          v-model="record.isShared"
          @change="handleEnabledChange(record, 'isShared')"
        />
      </template>
      <template #action="{ record }">
        <ga-link :loading="record?.status === 'syncing'" @click="handleSync(record)">
          同步
        </ga-link>
        <ga-link @click="$refs.editModalRef.open(record)">编辑</ga-link>
        <ga-link @click="$refs.tagModalRef.open(record)">标签</ga-link>
      </template>
    </ga-table>
    <Pagination
      v-if="total > 0"
      :total="total"
      :page="listQuery.page"
      :limit="listQuery.limit"
      @pagination="handlePagination"
    />
    <editModal ref="editModalRef" @fetchData="fetchClusterData" />
    <tagModal ref="tagModalRef" @fetchData="fetchClusterData" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Message } from "@garco-design/web-vue";
import useLoading from "@/hooks/loading";
import { getClusterList, editClusterList, syncCluster } from "@/api/cluserMgmt";
import { columns } from "./columns";
import editModal from "./components/editModal.vue";
import tagModal from "./components/tagModal.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const { id } = route.params;
const { loading, setLoading } = useLoading(false);
const total = ref(0);
const tableData = ref([]);
const listQuery = reactive({
  page: 1,
  limit: 10,
  modelId: null,
  search: "",
});
defineProps({
  // 是否padding0
  isPadding0: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "",
  },
});
const onBizModelSelect = (key) => {
  listQuery.modelId = key !== "all" ? key : null;
  fetchClusterData();
};
// 是否启用或者共享
const handleEnabledChange = async (record, type) => {
  const obj =
    type === "enabled" ? { enabled: record.enabled } : { isShared: record.isShared };
  const { code } = await editClusterList(record.id, obj);
  if (code === 20000) Message.success("操作成功");
};
// 列表
const fetchClusterData = async () => {
  setLoading(true);
  try {
    const { data, code } = await getClusterList(listQuery);
    if (code === 20000) {
      tableData.value = data?.items || [];
      total.value = data?.total;
    }
  } catch (err) {
    console.log(err);
  } finally {
    setLoading(false);
  }
};
// 同步
const handleSync = async (record) => {
  try {
    const { code } = await syncCluster({ resourceId: record.resourceId });
    if (code === 20000) Message.success("操作成功，后台同步中");
    record.status = "syncing";
  } catch (e) {
    console.log(e);
  }
};
// 搜索
const onSearch = (val) => {
  listQuery.search = val;
  fetchClusterData();
};
// 分页
const handlePagination = (val) => {
  listQuery.page = 1;
  const { page, limit } = val;
  listQuery.limit = Number(limit);
  listQuery.page = Number(page);
  fetchClusterData();
};
onMounted(() => {
  fetchClusterData();
});
defineExpose({ onBizModelSelect });
</script>

<style lang="scss" scoped>
.content_info {
  height: calc(100vh - 237px);
}
</style>
